<template>
  <div id="consumptionAccounting"></div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      myChart: "",
    };
  },
  mounted() {
    this.setEcharts();
    // this.getalarmType();
    this.winSize();
    window.onresize = () => {
      return (() => {
        var ratioX = window.innerWidth / 370;
        var ratioY = window.innerHeight / 188;
        var ratioY = window.innerHeight / 880;

        window.document.body.style.transform = "scale(" + ratioY + ")";
        window.document.body.style.transformOrigin = "0px 0px";
      })();
    };
  },
  methods: {
    // 自适应
    winSize() {
      var ratioY = window.innerHeight / 188;
      var ratioY = window.innerHeight / 880;
      var ratioX = window.innerWidth / 370;
      window.document.body.style.transform = "scale(" + ratioY + ")";
      window.document.body.style.transformOrigin = "0px 0px";
      // this.getalarmType();
    },
    setEcharts() {
      this.myChart = this.$echarts.init(
        document.getElementById("consumptionAccounting")
      );

      var xData = ["A", "B", "C", "D", "e", "f", "g"];
      var data = [155, 140, 177, 157, 200, 245, 173];
      var percent = [21, 28, 51, 35, 15];
      //   let chart = this.$echarts.init(this.$refs.belongSituation)
      var star =
        "";
      var imgList = [];
      var iconData = [];
      data.forEach((item, index) => {
        imgList.push({
          coord: [index, item],
          symbolSize: [100, 50],
          symbolKeepAspect: true,
          // symbolOffset: [-40, -185],
          symbol: "image://" + star,
        });
        iconData.push({
          value: item,
          symbolPosition: "end",
        });
      });
      // console.log(iconData)
      var option = {
        // backgroundColor: "rgb(8,25,34)",
        tooltip: {
          trigger: "axis",
          // backgroundColor: "rgba(7,55,63,0.7)",
          // borderColor: "rgba(7,55,63,0.7)",
          backgroundColor: "#000000",
          textStyle: {
            fontSize: 55, // 字体大小
            color: "#fff",
          },
          formatter: function (params) {
            return (
              params[0].marker + "" + params[0].name + ": " + params[0].value
            );
          },
        },
        grid: {
          top: "10%",
          left: "8%",
          bottom: "10%",
          right: "13%",
          // containLabel: true
        },
        xAxis: {
          data: xData,
          name: "单位: 日",
          nameGap: 30,
          nameTextStyle: {
            color: "#fff",
            fontSize: 40,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff",
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 38,
            },
          },
        },
        yAxis: {
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff",
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 38,
            },
          },
        },
        series: [
          {
            // name: "权属情况",
            type: "pictorialBar",
            symbolSize: [100, 25],
            symbolOffset: [0, -10],
            z: 12,
            itemStyle: {
              normal: {
                color: "#14b1eb",
                opacity: 0.5,
              },
            },
            data: iconData,
          },
          {
            name: "",
            type: "pictorialBar",
            symbolSize: [130, 30],
            symbolOffset: [0, -2],
            z: 10,
            itemStyle: {
              normal: {
                color: "transparent",
                borderColor: "#14b1eb",
                borderType: "solid",
                borderWidth: 5,
              },
            },
            data: iconData,
          },
          {
            name: "",
            type: "pictorialBar",
            symbolSize: [100, 25],
            symbolOffset: [0, -5],
            z: 10,
            itemStyle: {
              normal: {
                color: "transparent",
                borderColor: "#14b1eb",
                borderType: "solid",
                borderWidth: 5,
              },
            },
            data: iconData,
          },
          {
            name: "",
            type: "pictorialBar",
            symbolSize: [50, 10],
            symbolOffset: [0, -5],
            z: 12,
            itemStyle: {
              normal: {
                color: "rgb(9,227,255)",
              },
            },
            data: iconData,
          },
          {
            type: "bar",
            itemStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: "linear",
                  global: false,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgb(24,118,158)",
                    },
                    {
                      offset: 1,
                      color: "rgba(24,118,158,0.2)", //底部渐变颜色
                    },
                  ],
                },
              },
            },
            silent: true,
            barWidth: 100,
            barGap: "-100%", // Make series be overlap
            data: data,
            label: {
              show: true,
              position: "top",
              distance: 15,
              color: "#fff",
              fontSize: 40,
              // formatter: (params) => {
              //   // console.log(params)
              //   return (
              //     "{a|" +
              //     params.value +
              //     "}" +
              //     "株" +
              //     "\n" +
              //     "{b|" +
              //     percent[params.dataIndex] +
              //     "%}"
              //   );
              // },
              rich: {
                a: {
                  color: "#03adff",
                  fontSize: 18,
                  fontWeight: "bold",
                },
                b: {
                  color: "#fff",
                  fontSize: 16,
                  marginTop: 15,
                },
              },
            },
            markPoint: {
              data: imgList,
            },
          },
        ],
      };
      //   chart.setOption(option)

      this.myChart.setOption(option);
    },
  },
};
</script>

<style scoped lang="less">
#consumptionAccounting {
  width: 1712px;
  height: 880px;
  padding: 50px 40px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.6);
}
</style>
